<template>
  <div class="home-container">
    <img src="@/assets/img/home/top_banner.png">
    <div class="core-concept">
      <h4 class="title">我们的核心理念</h4>
      <p class="desc">工业母机高端装备未来工厂整体解决方案提供商</p>
      <img src="@/assets/img/home/core.png">
    </div>
    <div class="bg2">
      <h4 class="title">工业母机数智赋能行业全球引领者</h4>
      <p class="desc">专业·专注·至臻·至善</p>
      <div class="content-list">

        <div class="content-item card1">
          <div class="card-content">
            <div class="main">
              <div>
                <div class="title">
                  经营<br/> 业财管控一体化
                </div>
                <img/>
                <div class="content">
                  供应商业务协同管理系统提供全过程风险预警、预警处理等能力，可以帮助企业在引入供应商以及与供应商合作
                  过程中随时监控供应商风险，应对多变的全球市场环境，保障企业采购顺畅，降低风险连带成本。
                </div>
              </div>
              <div class="learn-more">
                <span>了解详情</span>
              </div>
            </div>
            <div class="main-ttitle">
              <h3>经营 <br/>业财管控一体化</h3>
            </div>
          </div>

          <div class="bg-color"></div>
        </div>
        <div class="content-item card2">
          <div class="card-content">
            <div class="main">
              <div>
                <div class="title">
                  制造<br/>协同制造精益化
                </div>
                <img/>
                <div class="content">
                  供应商业务协同管理系统提供全过程风险预警、预警处理等能力，可以帮助企业在引入供应商以及与供应商合作
                  过程中随时监控供应商风险，应对多变的全球市场环境，保障企业采购顺畅，降低风险连带成本。
                </div>
              </div>
              <div class="learn-more">
                <span>了解详情</span>
              </div>
            </div>
            <div class="main-ttitle">
              <h3>制造<br/>协同制造精益化</h3>
            </div>
          </div>

          <div class="bg-color"></div>
        </div>
        <div class="content-item card3">
          <div class="card-content">
            <div class="main">
              <div>
                <div class="title">
                  产线<br/>协同制造精益化
                </div>
                <img/>
                <div class="content">
                  供应商业务协同管理系统提供全过程风险预警、预警处理等能力，可以帮助企业在引入供应商以及与供应商合作
                  过程中随时监控供应商风险，应对多变的全球市场环境，保障企业采购顺畅，降低风险连带成本。
                </div>
              </div>
              <div class="learn-more">
                <span>了解详情</span>
              </div>
            </div>
            <div class="main-ttitle">
              <h3>产线<br/>协同制造精益化</h3>
            </div>
          </div>

          <div class="bg-color"></div>
        </div>
        <div class="content-item card4">
          <div class="card-content">
            <div class="main">
              <div>
                <div class="title">
                  设备<br/> 感知运维实时化
                </div>
                <img/>
                <div class="content">
                  供应商业务协同管理系统提供全过程风险预警、预警处理等能力，可以帮助企业在引入供应商以及与供应商合作
                  过程中随时监控供应商风险，应对多变的全球市场环境，保障企业采购顺畅，降低风险连带成本。
                </div>
              </div>
              <div class="learn-more">
                <span>了解详情</span>
              </div>
            </div>
            <div class="main-ttitle">
              <h3>设备<br/> 感知运维实时化</h3>
            </div>
          </div>

          <div class="bg-color"></div>
        </div>
        <div class="content-item card5">
          <div class="card-content">
            <div class="main">
              <div>
                <div class="title">
                  工业母机高端装<br/>备未来工厂诊断<br/>咨询服务
                </div>
                <img/>
                <div class="content">
                  供应商业务协同管理系统提供全过程风险预警、预警处理等能力，可以帮助企业在引入供应商以及与供应商合作
                  过程中随时监控供应商风险，应对多变的全球市场环境，保障企业采购顺畅，降低风险连带成本。
                </div>
              </div>
              <div class="learn-more">
                <span>了解详情</span>
              </div>
            </div>
            <div class="main-ttitle">
              <h3>工业母机高端装<br/>备未来工厂诊断<br/>咨询服务</h3>
            </div>
          </div>

          <div class="bg-color"></div>
        </div>
      </div>
    </div>

    <!--    为各行业提供垂直解决方案-->
    <div class="bg3">
      <h3 class="title">为各行业提供垂直解决方案</h3>
      <p class="content">为客户提供专业的咨询、技术支持和解决方案等整体服务</p>
      <div class="tabs">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="01 工程建设解决方案" name="1">
            <div class="tab-container">
              <div class="main-left">
                <h3 class="title">工业设备解决方案</h3>
                <div class="content">
                  供应商业务协同管理系统提供全过程风险预警、预警处理等能力，可以帮助企业在引入供应商以及与供应商合作
                  过程中随时监控供应商风险，
                  应对多变的全球市场环境，保障企业采购顺畅，降低风险连带成本。供应商业务协同管理系统实时信息化协同，全流程开放、透明、可控，
                  实现供采之间双向迅速匹配，企业交易效 率大幅提高。基于数据分析，全流程信息公开公正，实时询价比价，精准筛选优质供应商，推进采购计划。
                </div>
                <el-button class="learn-more-about"
                           style="background-color: rgba(48, 136, 239, 1);width:150px;height: 40px;" type="primary">
                  进一步了解
                </el-button>
              </div>
              <div class="main-right">
                <img src="@/assets/img/home/card14.png" width="100%" height="100%">
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="02 工业设备解决方案" name="2">Config</el-tab-pane>
          <el-tab-pane label="03 产品设计与制造" name="3">Role</el-tab-pane>
          <el-tab-pane label="04 物流调度解决方案" name="4">Task</el-tab-pane>
          <el-tab-pane label="05 柔性制造工厂" name="5">Task</el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!--  让每一家工厂都更智能化  -->
    <div class="bg4">
      <h3 class="title">让每一家工厂都更智能化</h3>
      <p class="content">留下您的联系方式我们的客服经理会尽快联系您</p>
      <el-button class="production-try">产品试用
        <el-icon>
          <ArrowRightBold/>
        </el-icon>
      </el-button>
    </div>

    <!--    我们的合作伙伴-->
    <div class="bg5">
      <h3 class="title">我们的合作伙伴</h3>
      <p class="content">为客户提供专业的咨询、技术支持和解决方案等整体服务</p>
      <div class="content-list">
        <div v-for="(item, index) in imgs" :key="index" class="content-item">
          <img :src="item" style="width: 100%;height: 100%">
        </div>
      </div>
    </div>

    <!--    footer-->
    <div class="bg6">

    </div>
  </div>
</template>

<script>

import { reactive, ref, onMounted } from 'vue'
// 获取assets静态资源
const getAssetsFile = (url) => {
  return new URL(`../../assets/img/home/${url}`, import.meta.url).href
}
export default {
  setup () {
    const activeName = ref('1')
    console.log(getAssetsFile)
    const imgs = reactive([
      getAssetsFile('cooperate1.png'), getAssetsFile('cooperate2.png'), getAssetsFile('cooperate3.png'),
      getAssetsFile('cooperate4.png'), getAssetsFile('cooperate5.png'), getAssetsFile('cooperate6.png'),
      getAssetsFile('cooperate7.png'), getAssetsFile('cooperate8.png'), getAssetsFile('cooperate9.png'),
      getAssetsFile('cooperate10.png'), getAssetsFile('cooperate11.png'), getAssetsFile('cooperate12.png'),
      getAssetsFile('cooperate13.png'), getAssetsFile('cooperate14.png')
    ])
    const handleClick = (tab, event) => {
      console.log(tab, event)
    }

    // onMounted(() => {
    //   imgs.push(getAssetsFile(''))
    // })

    return {
      activeName,
      imgs,
      handleClick
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./home";
</style>